<template>
  <div id="specil-device-details-modal">
    <a-modal
      title="详情"
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :destroyOnClose="true"
      :footer="null"
      width="1700px"
      :getContainer="getContainer"
      wrapClassName="specil-device-details-modal"
      @cancel="closeModal()"
    >
      <div class="device-details-modal-body" v-loading="loading">
        <a-form-model :model="form">
          <a-row>
            <a-col :span="6" v-for="(item, index) in dataSource" :key="index">
              <a-form-model-item :label="item.name">
                <a-input
                  v-if="keys.includes(item.key)"
                  disabled
                  :class="[
                    item.type && 'status-input',
                    checkColor(form[item.key]),
                  ]"
                  :value="checkState(form[item.key])"
                />
                <a-input
                  v-else
                  disabled
                  :class="[
                    item.type && 'status-input',
                    getResultClass(form[item.key]),
                  ]"
                  :value="
                    item.type
                      ? getResult(form[item.key])
                      : form[item.key] + (item.unit ? ' ' + item.unit : '')
                  "
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { setLMDDetail } from "@/api/wisdom-beam/collect-app.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        val && this.getData();
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      dataSource: [
        {
          name: "累计工作时间",
          key: "j135",
        },
        {
          name: "累计工作次数",
          key: "j136",
          unit: "次",
        },
        {
          name: "本次工作时间",
          key: "j137",
        },
        {
          name: "风级",
          key: "j22",
        },
        {
          name: "风速",
          key: "j25",
          unit: "m/s",
        },
        {
          name: "风速报警",
          key: "j109",
          type: "status",
        },
        {
          name: "水平x倾角",
          key: "j26",
          unit: "°",
        },
        {
          name: "水平y倾角",
          key: "j27",
          unit: "°",
        },
        {
          name: "垂直1",
          key: "j28",
          unit: "°",
        },
        {
          name: "垂直2",
          key: "j29",
          unit: "°",
        },
        {
          name: "前车主钩重量",
          key: "j7",
          unit: "t",
        },
        {
          name: "前车主钩深度",
          key: "j8",
          unit: "m",
        },
        {
          name: "前车主钩速度",
          key: "j9",
          unit: "m/s",
        },
        {
          name: "前车副钩重量",
          key: "j10",
          unit: "t",
        },
        {
          name: "前车副钩深度",
          key: "j11",
          unit: "m",
        },
        {
          name: "前车副钩速度",
          key: "j12",
          unit: "m/s",
        },
        {
          name: "后车主钩重量",
          key: "j13",
          unit: "t",
        },
        {
          name: "后车主钩深度",
          key: "j14",
          unit: "m",
        },
        {
          name: "后车主钩速度",
          key: "j15",
          unit: "m/s",
        },
        {
          name: "后车副钩重量",
          key: "j16",
          unit: "t",
        },
        {
          name: "后车副钩深度",
          key: "j17",
          unit: "m",
        },
        {
          name: "后车副钩速度",
          key: "j18",
          unit: "m/s",
        },
        {
          name: "整车位置(左)",
          key: "j19",
          unit: "m",
        },
        {
          name: "前车位置",
          key: "j20",
          unit: "m",
        },
        {
          name: "后车位置",
          key: "j21",
          unit: "m",
        },
        {
          name: "整车位置(右) （大跨度）",
          key: "j23",
          unit: "m",
        },
        {
          name: "整车左行",
          key: "j71",
          type: "status",
        },
        {
          name: "整车右行",
          key: "j72",
          type: "status",
        },
        {
          name: "前车前进",
          key: "j73",
          type: "status",
        },
        {
          name: "前车后退",
          key: "j74",
          type: "status",
        },
        {
          name: "后车前进",
          key: "j75",
          type: "status",
        },
        {
          name: "后车后退",
          key: "j76",
          type: "status",
        },
        {
          name: "前主卷扬提钩",
          key: "j77",
          type: "status",
        },
        {
          name: "前主卷扬落钩",
          key: "j78",
          type: "status",
        },
        {
          name: "前副卷扬提钩",
          key: "j79",
          type: "status",
        },
        {
          name: "前副卷扬落钩",
          key: "j80",
          type: "status",
        },
        {
          name: "后主卷扬提钩",
          key: "j81",
          type: "status",
        },
        {
          name: "后主卷扬落钩",
          key: "j82",
          type: "status",
        },
        {
          name: "后副卷扬提钩",
          key: "j83",
          type: "status",
        },
        {
          name: "后副卷扬落钩",
          key: "j84",
          type: "status",
        },
        {
          name: "整车左限位",
          key: "j87",
          type: "status",
        },
        {
          name: "整车右限位",
          key: "j88",
          type: "status",
        },
        {
          name: "整车前限位",
          key: "j89",
          type: "status",
        },
        {
          name: "前车后限位",
          key: "j90",
          type: "status",
        },
        {
          name: "后车前限位",
          key: "j91",
          type: "status",
        },
        {
          name: "后车后限位",
          key: "j92",
          type: "status",
        },
        {
          name: "前主卷扬上限位",
          key: "j93",
          type: "status",
        },
        {
          name: "前主卷扬下限位",
          key: "j94",
          type: "status",
        },
        {
          name: "前副卷扬上限位",
          key: "j95",
          type: "status",
        },
        {
          name: "前副卷扬下限位",
          key: "j96",
          type: "status",
        },
        {
          name: "后主卷扬上限位",
          key: "j97",
          type: "status",
        },
        {
          name: "后主卷扬下限位",
          key: "j98",
          type: "status",
        },
        {
          name: "后副卷扬上限位",
          key: "j99",
          type: "status",
        },
        {
          name: "后副卷扬下限位",
          key: "j100",
          type: "status",
        },
        {
          name: "前主卷扬超载",
          key: "j101",
          type: "status",
        },
        {
          name: "前主卷扬超速",
          key: "j102",
          type: "status",
        },
        {
          name: "前副卷扬超载",
          key: "j103",
          type: "status",
        },
        {
          name: "前副卷扬超速",
          key: "j104",
          type: "status",
        },
        {
          name: "后主卷扬超载",
          key: "j105",
          type: "status",
        },
        {
          name: "后主卷扬超速",
          key: "j106",
          type: "status",
        },
        {
          name: "后副卷扬超载",
          key: "j107",
          type: "status",
        },
        {
          name: "后副卷扬超速",
          key: "j108",
          type: "status",
        },
      ],
      keys: [
        "j71",
        "j72",
        "j73",
        "j74",
        "j75",
        "j76",
        "j77",
        "j78",
        "j79",
        "j80",
        "j81",
        "j82",
        "j83",
        "j84",
      ],
    };
  },
  mounted() {},
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        setLMDDetail({ id: this.id })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.form = source;
            resolve();
          })
          .catch((_) => {
            this.form = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    getResult(val) {
      switch (val) {
        case "false":
          return "正常";
        case "true":
          return "异常";
        default:
          return "--";
      }
    },

    getResultClass(val) {
      switch (val) {
        case "false":
          return "";
        case "true":
          return "error";
        default:
          return "";
      }
    },
    //J71 ~ J84  状态校验
    checkState(val) {
      switch (val) {
        case "false":
          return "未操作";
        case "true":
          return "正在执行";
        default:
          return "--";
      }
    },

    checkColor(val) {
      switch (val) {
        case "false":
          return "error";
        case "true":
          return "";
        default:
          return "";
      }
    },

    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },

    getContainer() {
      return document.getElementById("app");
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.specil-device-details-modal {
  .ant-modal-body {
    padding-right: 0;
  }
  .device-details-modal-body {
    height: 680px;
    padding-right: 50px;
    .custom-scrollbar();
    .ant-col-6 {
      &:nth-child(4n + 1) {
        .ant-form-item-label {
          width: 150px;
        }
      }
    }
    .ant-form-item {
      input {
        &.status-input {
          &.error {
            background: #ffe3e5;
            color: #ff3f4a;
          }
        }
      }
      .flex();
      width: 100%;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 200px;
        text-align: right;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
}
</style>
